<template>
  <a-drawer :open="true" :title="`${item ? '编辑' : '添加'}机源属性`" @close="onClose">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="rules">
      
      <a-form-item label="名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="类型" name="type">
        <a-select v-model:value="formState.type" placeholder="请选择" >
          <a-select-option v-for="(t,i) in itemPropsType" :key="i" :value="t.key">
            {{ t.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="字典" name="dictCode" v-if="formState.type == 'dict'">
        <a-select v-model:value="formState.dictCode" placeholder="请选择" >
          <a-select-option v-for="(d,i) in dicts" :key="i" :value="d.code">
            {{ d.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="默认值" name="defaultValue" >
        <a-input v-model:value="formState.defaultValue" placeholder="请输入" />
      </a-form-item>      
      <a-form-item label="排序" name="sort" >
        <a-input-number v-model:value="formState.sort" placeholder="请输入" />
      </a-form-item>      
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="toSave" :loading="saving">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { saveProps, itemPropsType } from '@/api/props';
import { message } from 'ant-design-vue'
import { confirm } from '@/mixin'
import { useGlobalStore } from '@/store/global'

const props = defineProps(['item'])
const emit = defineEmits(['close', 'saved'])

const global = useGlobalStore()

const rules = {
  name: [
    { required: true, message: '请输入机源属性名称' }
  ],
  type: [
    { required: true, message: '请选择值类型' }
  ],
}

const formRef = ref(null)
const formState = reactive({})
const saving = ref(false)
const dicts = ref([])

onMounted(() => {
  parseItem()
  loadDicts()
})

const loadDicts = async ()=>{
  dicts.value = await global.getDicts()
}

const parseItem = () => {
  const it = props.item
  if (it) {
  
    formState.name = it.name
    formState.type = it.type
    formState.defaultValue = it.defaultValue
    formState.dictCode = it.dictCode
    formState.sort = it.sort || 1
  } else {
    formState.name = null
    formState.type = null
    formState.defaultValue = null
    formState.dictCode = null
    formState.sort = 1
  }
}

const onClose = () => {
  emit('close')
}

const toSave = () => {
  formRef.value.validate().then(values => {
    
    confirm('您确定要保存机源属性字段吗?', async () => {
      if (props.item) {
        values.id = props.item.id
      }
      saving.value = true
      const res = await saveProps(values)
      saving.value = false
      if (res.data) {
        message.success('保存成功')
        emit('saved')
      } else {
        message.error('保存失败')
      }
    })
  })
}
</script>

<style lang="less" scoped></style>